import React, { useState } from 'react'
import { Table, Space, Button, Switch, Select, Input } from 'antd'
import { useMount } from 'ahooks'
import { getProList, getCategoryList, updateFlag, searchPro } from '../../api/pro'
const { Option } = Select;
function ProList() {
  const [ proList, setProList ] = useState([])
  const [ categoryList, setCategoryList] = useState([])

  const [ current, setCurrent ] = useState(1) // 设置默认的页码
  const [ pageSize, setPageSize ] = useState(10) // 默认每页显示10条数据
  useMount(() => {
    getProList().then(res => {
      console.log(res.data.data)
      setProList(res.data.data)
    })
    getCategoryList().then(res => {
      console.log(res.data.data)
      const arr = []
      res.data.data.forEach(item => {
        arr.push({ text: item, value: item })
      });
      setCategoryList(arr)
    })
  })
  const columns = [
    {
      title: '序号', fixed: 'left', width: 120, align: 'center', render: (text, record, index) => (<span>{ (current - 1) * pageSize + index + 1 }</span>)
    },
    {
      title: '名称', fixed: 'left', width: 300, align: 'center', dataIndex: 'proname'
    },
    {
      title: '图片', fixed: 'left', width: 180, align: 'center', dataIndex: 'img1', render: (text) => (<img style={{ height: 80 }} src = { text } alt=""/>)
    },
    {
      title: '分类', width: 180, align: 'center', dataIndex: 'category',
      filters: categoryList,
      onFilter (value, record) {
        return record.category.indexOf(value) !== -1
      }
    },
    {
      title: '品牌', width: 180, align: 'center', dataIndex: 'brand'
    },
    {
      title: '销量', width: 120, align: 'center', dataIndex: 'sales',
      sorter (a, b) {
        return a.sales - b.sales
      }
    },
    {
      title: '原价', width: 120, align: 'center',dataIndex: 'originprice',
      sorter (a, b) {
        return a.originprice - b.originprice
      }
    },
    {
      title: '折扣', width: 120, align: 'center', dataIndex: 'discount',
      sorter (a, b) {
        return a.discount - b.discount
      }
    },
    {
      title: '库存', width: 120, align: 'center', dataIndex: 'stock'
    },
    {
      title: '是否上架', width: 120, align: 'center', dataIndex: 'issale', render: (text) => (
        <Switch checked = { text === 1 }/>
      )
    },
    {
      title: '是否推荐', width: 120, align: 'center', dataIndex: 'isrecommend', render: (text, record) => (
        <Switch checked = {text === 1} onChange = { (checked) => {
          updateFlag({
            type: 'isrecommend',
            proid: record.proid,
            flag: checked
          }).then(() => {
            getProList().then(res => {
              console.log(res.data.data)
              setProList(res.data.data)
            })
          })
        }}/>
      )
    },
    {
      title: '是否秒杀',width: 120, align: 'center', dataIndex: 'isseckill', render: (text, record) => (
        <Switch checked = {text === 1} onChange = { (checked) => {
          updateFlag({
            type: 'isseckill',
            proid: record.proid,
            flag: checked
          }).then(() => {
            getProList().then(res => {
              console.log(res.data.data)
              setProList(res.data.data)
            })
          })
        }}/>
      )
    },
    {
      title: '操作', fixed: 'right', width: 200, align: 'center', render: (text, record) => (
        <Space >
          <Button type="ghost">编辑</Button>
          <Button danger>删除</Button>
        </Space>
      )
    },
  ]


  const [ category, setCategory] = useState('')
  const [ search, setSearch] = useState('')
  const searchFn = () => {
    console.log(111)
    searchPro({
      category, search
    }).then(res => {
      setProList(res.data.data)
    })
  }
  return (
    <div>
      <Space>
        <Select defaultValue="" style = {{ width: 200}} onChange={ (value) => {
          console.log(value)
          setCategory(value)
        }}>
          <Option value="">全部</Option>
          {
            categoryList.map(item => {
              return <Option key={item.text} value={ item.value }> { item.text}</Option>
            })
          }
        </Select>
        <Input allowClear placeholder = "请输入搜索的关键次" onChange = { (event) => {
          setSearch(event.target.value)
        }}></Input>
        <Button type="primary" onClick = { searchFn }>搜索</Button>
      </Space>
      <Table 
      scroll={{ x: 1500, y: 700 }} 
      dataSource = { proList } 
      columns = { columns } 
      rowKey="proid"
      pagination = { { // https://ant.design/components/pagination-cn/#API
        // position: [ 'topLeft', 'bottomRight']
        current,
        pageSize,
        showQuickJumper: true,
        showTotal: (total) => <span>共有{total}条数据</span>,
        pageSizeOptions: [ 10, 50, 100, 200],
        onChange (page, pageSize) {
          setCurrent(page)
          setPageSize(pageSize)
        }
      }}
      ></Table>
    </div>
  )
}

export default ProList
